<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>图书管理系统</title>
	<script type="text/javascript" src="static/jquery-easyui-1.5.5.3/jquery.min.js"></script>
	<link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap.css" >
	<link rel="stylesheet" href="static/jquery-easyui-1.5.5.3/themes/material-teal/easyui.css" />
	<link rel="stylesheet" href="static/jquery-easyui-1.5.5.3/themes/icon.css" />
	<link rel="stylesheet" href="	static/personForm.css">
	<script type="text/javascript" src="static/jquery-easyui-1.5.5.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="static/jquery-easyui-1.5.5.3/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="webjars/bootstrap/3.3.7-1/js/bootstrap.js"></script>
	<script type="text/javascript" src="static/personForm.js"></script>
	<style type="text/css">
	*{
		padding: 0px;
		margin: 0px;
	}
	body{
	/* background-color:#FAFAFA; */
	}
	#header{
		border-top:hidden;
	}
	#font{
		font-family: "楷体";
		font-size:18px;
		margin-left: 10px; 
	}
	.ah{
		color:black;
		width: 100%;
		float: left;
		font-size: 14px;
		padding-top: 5px;
		padding-bottom:5px;
		padding-left: 20px;
		border: 1px solid #cdcdcd;
		border-top:none;
		border-right: none;
		border-left:none;  
	
		}
	.ah:hover{
		color: white;
		text-decoration:none;
		cursor: pointer;
		background-color: #cdcdcd;
		}
		#header{
			color: #887788;
			padding-top:1.4%;
			
		}
		#row1{
			float:left;
			padding-left: 20px;
			cursor: pointer;
		}
		#row2 {
		float: right;
		margin-right: 20px;
		cursor: pointer;
		
	}
	</style>
<script type="text/javascript">
$(function(){
	 $('.ah').click(function(){
		var src=$(this).attr('title');//获取路径
		var title=$(this).html();//取标签的文本值
		if($('#tt').tabs('exists',title)){
			$('#tt').tabs('select',title);//如果有就取当前的tabs
		}else{  //否则新增一个tabs
		 	$('#tt').tabs('add',{    
		    title:title,    
		    content:'<iframe frameborder=0 style="width:100%;height:98% " src='+src+'></iframe>',    
		    closable:true,
		    tools: [{
				iconCls: 'icon-mini-refresh',
				handler: function(){
					var li = $(this).parent().parent();
					if(li.length > 0){
						var tab = $('#tt').tabs('getTab', li.eq(0).index());
						tab.panel('refresh');
					}
				}
			}]

		}); 
		}
	}); 
}); 
/* 		function showTab(container,title,src){
			var tabContainer = $(container);
			if(tabContainer.tabs('exists',title)){//判断选项卡是否存在
				var tab = tabContainer.tabs('getTab',title);//获取选项卡
				var currentTab = tabContainer.tabs('getSelected');
				tab.panel('refresh',src);//更新面板的内容
				if(tab!=currentTab){
					tabContainer.tabs('select',title);//取当前的面板
				}
			}else{//新增一个面板
				tabContainer.tabs('add',{
					title: title,
					href:src,
					closable:true,
					tools:[{
						iconCls:'icon-mini-refresh',
						handler:function(){
							var $li=$(this).parent().parent();
							if($li.length>0){
								var $tab = $('#tabContainer').tabs('getTab',$li.eq(0).index());
								$tab.panel('refresh');//更新选项卡内容
							}
						}
					}]
				});
			}
		}
		$(function(){
			$('#tabContainer').tabs({
				fit:true  //选项卡的大小铺满整个容器
			});
			$('#left_menu .easyui-tree').tree({
				onClick:function(node){
					if(node.text != undefined&&node.href != undefined){
						showTab('#tabContainer' , node.title ? node.title:node.text,node.href);
					}
				}
			});
		});
		
	}); */
		function borrowBook(id,number){
			if(number <= 0){
				$.messager.alert('警告','数量不足');  
			}else{
				$.messager.confirm( '提示信息','确定借此书吗？请在二个月之内归还',function(j){
				if(j){
					$.post('borrowed/borrowBook',{id:id},function(data){
						alert(data); 
						location.replace("main");
						});
					}
			});
		}
	}
function logout(){
	$.messager.confirm( '确定','确定退出吗？',function(g){
	if(g){
		window.location.href="logoutc";
		}else{
			return false;
		}
	});
}


</script>
</head>
<body>
<!-- 	<nav class="navbar navbar-default" role="navigation"  style="margin-bottom: 0px;width: auto;">
		   <div class="container-fluid">
			    <div class="navbar-header">
			    	<a class="navbar-brand"><span class="glyphicon glyphicon-random"></span></a>
			        <a class="navbar-brand" href="#">图书管理系统</a>
			    </div>
		   <div style="float: right;">
		        <ul class="nav navbar-nav">
		            <li>
		            	<a>
		            		<span class="glyphicon glyphicon-user"></span>
							<span sec:authorize="hasRole('ROLE_DVP')"> 开发者</span>
							<span sec:authorize="!hasRole('ROLE_DVP')" sec:authentication="principal.name"></span>
				        </a>
				     </li>
		            <li><a  th:href="${#request.getContextPath()+'/main'}"><span class="glyphicon glyphicon-home"></span> 刷新页面</a></li>
		            <li><a style="cursor: pointer;" onclick="logout()"><span class="glyphicon glyphicon-off"></span> 注销</a></li>
		        </ul>
		    </div>
		   </div>
		</nav> -->
	<div id="cc" class="easyui-layout" fit=true>
		    <div id="header" data-options="region:'north'" style="height:9%;background-color: #FBFBFB">
	    		<div id="row1" >
	    			<span class="glyphicon glyphicon-random"></span>
	    			<font  style="font-size:18px;">&nbsp;图书管理系统</font> 
	    		</div>
	    	<div id="row2">
   				<span class="glyphicon glyphicon-home"></span>
	    		<a th:href="${#request.getContextPath()+'/main'}"><font color="#887788">刷新页面</font></a>&nbsp;
				<span class="glyphicon glyphicon-user"></span>
				<span sec:authorize="hasRole('ROLE_DVP')">开发者</span>
				<span sec:authorize="!hasRole('ROLE_DVP')" sec:authentication="principal.name"></span>
   				&nbsp;<span class="glyphicon glyphicon-off"></span>
   				<a style="color:#887788;" onclick="logout()">退出</a>&nbsp;
	    	</div>
	    </div>   
		<div data-options="region:'west',iconCls:'icon-more', title:'操作菜单'" style="width:15%; background: #FAFAFA;">
			<div id="aa" class="easyui-accordion" fit=true > 
				<div title="读者管理" data-options="iconCls:'icon-man'" sec:authorize="hasRole('ROLE_ADMIN')">   
					<div>
						<a class="ah" title="user/teacherAll"><b> 老师管理</b></a>
					  	<a class="ah" title="user/stuAll"> <b> 学生管理</b></a>
					  	<a class="ah" title="borrowed/breach"><b> 读者违约处理</b></a>
					</div>
			   	 </div> 
			   	 <div title="部门管理" data-options="iconCls:'icon-sum'" sec:authorize="hasRole('ROLE_ADMIN')">
						<a class="ah" title="dept/manage"><b> 学院班级管理</b></a>
			   	 	
			   	 </div>
				<div title="图书管理" data-options="iconCls:'icon-filter'" sec:authorize="hasRole('ROLE_ADMIN')"> 
					<div>
						<a class="ah" title="books/bookAll"><b> 操作图书</b></a>
					</div>
			   	 </div> 
				<div title="图书授权" data-options="iconCls:'icon-print'" sec:authorize="hasRole('ROLE_ADMIN')">   
					<div>
						<a class="ah" title="borrowed/accredit"><b> 图书授权/借书记录</b></a>
					</div>
			   	 </div> 
				<div title="日志" data-options="iconCls:'icon-help'" sec:authorize="hasRole('ROLE_ADMIN')">   
					<div>
						<a class="ah" title="log"><b> 操作日志</b></a>
					 
					</div>
			   	 </div> 
				<div title="个人信息" data-options="iconCls:'icon-tip'" sec:authorize="hasRole('ROLE_USER')">   
					<div>
						<a class="ah" title="user/personal"><b> 查看个人信息</b></a>
					  	
					</div>
			   	 </div> 
				<div title="我的借书" data-options="iconCls:'icon-remove'" sec:authorize="hasRole('ROLE_USER')">   
					<div>
						<a class="ah" title="borrowed/recordBorrow"><b> 正在借书中</b></a>
					  	<a class="ah" title="borrowed/returnBook"><b> 我的已借书籍</b></a>
					  	<a class="ah" title="borrowed/historyBook"><b> 历史借书</b></a>
					</div>
			   	 </div> 
				<div title="修改密码" data-options="iconCls:'icon-edit'">   
					<div>
						<a class="ah" title="changePwd"><b> 修改密码</b></a>
					  	
					</div>
			   	 </div> 
			</div>
		</div>
	<div  id="tabContainer" data-options="region:'center'," style="background: #FAFAFA;" sec:authorize="hasRole('ROLE_ADMIN')">
	<div id="tt" class="easyui-tabs"  fit=true  style="width:500px;height:auto;border: none;">   
			<div title="欢迎页面" style="display:none; overflow:auto; border:none;" >   
				<div id="font">
					<p style="color: red"><font style="font-size:20px;">特别提示:</font>本次运行的服务器，点击会出现卡顿，加载会比较慢，请耐心等待....</p>
					<h4>此项目前端运用的easyui，表格是datagrid表格，具有分页功能，一列显示多少条数据可以，</h4>
					<h4>自行调整观看默认是5条，8条或者10条数据；具有一些增，删，改，查，批量删除等操作。</h4>
					<h4>附加form表单加了校验。</h4>
					<p>测试用户时，可以自行注册一个用户进行登陆，分别有老师注册和学生注册，随便选一个注册，因为都是读者（用户）</p>
					<p>用户测试步骤：</p>
					<p>用户首先在欢迎页面借书，就可以在《正在借书中》可以看到等待管理员授权状态，这个时候就需要登陆管理员账号《图书授权》中进行确认授权</p>
					<p>管理员确认授权之后，在登陆用户账号《我的已借书籍》就可以看到书了，并且也可以点击按钮进行还书。</p>
					<p>下列是本次测试的用户名和密码：</p>
					<p>管理员：admin</p>
					<p>密码：admin </p>
					<p>读者(张三)：aaa （可以自行注册读者进行测试）</p>
					<p>密码:111 （当用户忘记密码可以联系管理员对用户进行重置密码，重置密码默认为111）</p>
				</div>
			</div>  
		</div>
	</div>
	<div id="tabContainer" data-options="region:'center'," style="background: #FAFAFA;" sec:authorize="hasRole('ROLE_USER')">
	<div id="tt" class="easyui-tabs"  fit=true  style="width:500px;height:500px;border: none;">   
			<div title="欢迎页面" style="padding:20px;display:none; overflow:auto;" >   
				<div>
					<table style="width: 100%;" id="mytabel" >
					<tr th:each="b:${books}" style="float: left;">
					<td style="padding: 20px;width: 170px;"> 
						<img alt="log" th:src="@{/download/(id=${b.id})}" width=100px, height=150px  style="float: left;">
						<label>书名:</label><label th:text="${b.title}"></label><br>
						<label>作者：</label><label th:text="${b.suthor}"></label><br>
						<label>数量：</label><label th:text="${b.number}"></label><br>
						<button  class="easyui-linkbutton" type="button" th:onclick="'javascript:borrowBook(\''+${b.id}+'\',\''+${b.number}+'\')'" >借书</button>
					</td>
					</tr>
					</table> 
					
				</div>
			</div>  
		</div>
	</div>
</div>
</body>
</html>